<template>
    <section>
        <div class="part1">
            <div class="part1_left"></div>
            <div class="part1_right"></div>

        </div>
        <div class="part2">

            <div class="part2_top"></div>
            <div class="part2_middle"></div>
            <div class="part2_bottom"></div>
        </div>

        <div class="part3">
            <div class="part3_top"></div>
            <div class="part3_middle">
                <div class="cord"></div>
                <div class="cord"></div>
                <div class="cord"></div>
                <div class="cord"></div>

            </div>
            <div class="part3_bottom"></div>
        </div>
    </section>

    <div style="display: flex;height: 200px; flex-direction: row; gap: 0px; justify-content: flex-start;align-items: stretch;">
        <div style="width: 100px;  background-color: red; padding: 0;margin: 0;">
        </div>
        <div style="width: 100px;  background-color: black; padding: 0;margin: 0;">
        </div>
        <div style="width: 100px;  background-color: blue; padding: 0;margin: 0;">
        </div>
    </div>

</template>

<script setup>
document.body.style = `
    width: 100vw;
    height: 100vh;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
`;


</script>
<style scoped>
div {
    border: 1px red solid;
}

section {
    width: 1200px;
    height: 800px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
}

.part1 {
    width: 1100px;
    height: 100px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.part1_left {
    width: 100px;
    height: 80px;
}

.part1_right {
    width: 100px;
    height: 80px;
}



.part2 {
    width: 1100px;
    height: 360px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
}


.part2_top {
    width: 600px;
    height: 100px;
}

.part2_middle {
    width: 400px;
    height: 100px;
}


.part2_bottom {
    width: 300px;
    height: 100px;
}

.part3 {
    width: 1100px;
    height: 300px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
}


.part3_top {
    width: 1000px;
    height: 30px;
}

.part3_middle {
    justify-content: space-between;
    width: 1000px;
    height: 200px;
    display: flex;
    align-items: center;
}

.cord {
    width: 180px;
    height: 180px;
}

.part3_bottom {
    width: 1000px;
    height: 50px;
}
</style>